<template>
  <div>

    <!-- 添加和修改课时表单 -->
    <el-dialog :visible.sync="dialogVideoFormVisible"
               :show-close="false"
               title="添加课时">
      <el-form :model="video"
               label-width="120px">
        <el-form-item label="课时标题">
          <el-input v-model="video.title" />
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number v-model="video.sort"
                           :min="0"
                           controls-position="right" />
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.isFree">
            <el-radio :label="true">免费</el-radio>
            <el-radio :label="false">默认</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- :before-remove="beforeVodRemove"
                      :file-list="fileList"-->
        <el-form-item label="上传视频">
          <el-upload :on-success="handleVodUploadSuccess"
                     :on-remove="handleRemove"
                     :on-exceed="handleUploadExceed"
                     :file-list="fileList"
                     :action="BSAE_API+'/eduvod/video/uploadAlyVideo'"
                     :limit="1"
                     class="upload-demo">
            <el-button size="small"
                       type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">最大支持1G，<br>
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
              <i class="el-icon-question" />
            </el-tooltip>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary"
                   :disabled="saveVideoBtnDisabled"
                   @click="saveOrUpdateVideo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  props: {
    dialogVideoFormVisible: Boolean,
    video: Object,
    saveVideoBtnDisabled: Boolean,
    fileList: Array
  },
  data() {
    return {
      BSAE_API: process.env.VUE_APP_BASE_API
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog', this.video)
    },
    saveOrUpdateVideo() {
      this.$emit('saveOrUpdateVideo', this.video)
    },
    // 成功回调
    handleVodUploadSuccess(response, file, fileList) {
      console.log(response)
      this.$emit('fileList', fileList)
      this.video.videoSourceId = response.data.videoID
    },
    // 视图上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning('想要重新上传视频，请先删除已上传的视频')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    }
  }
}
</script>

<style>
</style>
